<!--
  Generated template for the PcontentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    
    <ion-segment [(ngModel)]="tabs">
      <ion-segment-button value="plist">
        商品
      </ion-segment-button>
      <ion-segment-button value="pcontent">
        详情
      </ion-segment-button>

     
    </ion-segment>

  </ion-navbar>

</ion-header>


<ion-content>

    <div class="p_content">

        <div [ngSwitch]="tabs">
          <div class="con_1" *ngSwitchCase="'plist'">
              <div class="p_img">
                  <img [src]="config.apiUrl+item.pic" />            
              </div>
              <div class="p_info mb10">
                  <div class="p_title">
                      <h2>{{item.title}}</h2>
                      <p>{{item.sub_title}}</p>
                  </div>

                  <div class="product_price mb10">
                      <span class="now_price">特价：<span class="price">¥{{item.price}}</span></span> 　 　原价：<span class="old_price"> ¥{{item.old_price}}</span>  
                  </div>
              </div>

              <div class="p_attr mb10">


                      <div #myattr id="myattr">    
                        <div *ngIf="item.attr">

                            <div class="color" *ngFor="let attr of item.attr">
                                <strong>{{attr.cate}}:</strong> 
                                <span *ngFor="let a of attr.list;let key=index;" [ngClass]="{'active':key==0}">
                                  {{a}}
                                </span>
                          </div>
                          
                        </div>

                      </div>
                      <div class="number">
                
                                    <strong>数量:</strong>
                
                                    <div class="cart_number">
                                        <div class="input_left" (tap)="decNum()">-</div>
                                          <div class="input_center">
                                              <input type="text"  readonly="readonly" [(ngModel)]='num' name="num" id="num" />
                                          </div>
                                          <div class="input_right" (tap)="incNum()">+</div>
                                    </div>
                          
                          </div>

                  
               </div>

               <div class="fee mb10">
                  运费:免运费
                </div>

          </div>
        
          <div class="con_2" *ngSwitchCase="'pcontent'">

            <!-- 注意绑定html的方法 -->
              <div [innerHTML]='item.content'>
               
              </div>
          </div>
          
        </div>

      </div>
</ion-content>


<ion-footer>
  <ion-toolbar>
      <div class="footer_bar">
        <div class="carticon" [navPush]="CartPage">            
            <ion-icon name="cart"></ion-icon> 
            <p>购物车</p>
            <ion-badge color="danger">{{carts_num}}</ion-badge>
        </div>
        
        <div class="addcart" (click)="addCart()">
            加入购物车
        </div>
        <div class="buy">

            立即购买
        </div>
      </div>

  </ion-toolbar>
</ion-footer>
